<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5 Basic Page with korea</title>		
	<style >
		.outer-menu-item:hover {color: white;}
		.input-search:focus {background: greenyellow;
			outline: 0;
		}
		* {
			font-family:'맑은 고딕',Gothic,sans-serif;
			margin: 0;
			padding: 0;
		}
		a:link {text-decoration: none;}
		li{list-style: none;}
		body{background: #E6E6E6;
			width: 960px;
			margin: 0 auto;
		}
		#page-wrapper{
			background: white;
			width: 920px;
			padding: 10px 20px;
			margin-top: 40px;
		}
		#main-header{padding: 40px 50px;}
		.master-title{font-size: 30px; color: #191919;}
		.master-description{font-size: 15px; color: #383838;}
		.article-title{font-size: 25px;}
		#main-navigation{
			margin-bottom: 20px;
			border-top: 1px solid #C9C9C9;
			border-bottom: 1px solid #C9C9C9;
			height: 40px;
		}
		.pull-left{
			height: 40px;
			float: left;
		}
		.outer-menu-item{
			display: block;
			height: 30px; width: 80px;
			padding: 5px 20px;
			float: left;
		}
		.pull-right{
			padding: 7px;
			height: 26px;
			float: right;
		}
		.input-search{
			display: block;
			height:24px; width:120px;
			padding: 0px 0px 0px 10px;
			border: 1px solid #CCCCCC;
			border-radius: 15px 0 0 15px;
			float: left;
		}
		.input-search-submit{
			display: block;
			height: 26px; width: 50px;
			border: 1px solid #CCCCCC;
			border-radius: 0 15px 15px 0;
			float: left;
		}
		#main-section{
			width: 710px;
			float: left;
		}

		#main-aside{
			width: 200px;
			float: right;
		}
		article{
			padding: 0px 10px 20px 10px;
			border-bottom: 1px solid #C9C9C9;
		}
		.article-header{padding: 20px 0px;}
		.article-date{font-size: 13px;}
		.article-body{font-size: 14px;}
		.aside-list a{font-size: 13px; color: orange;}
		.aside-list > h3{font-size: 15px; color: blue;}
		#content{
			height:1350px;
		}
	</style>
</head>
<body>
	<div id="page-wrapper">
		<header id="main-header">
			<h1 class="master-title">웝 프로그래밍 완전 정복</h1>
			<h2 class="master-description">건국대학교 소프트웨어학과</h2>
		</header>
		<nav id="main-navigation">
			<div class="pull-left">
			<ul class="outer-menu">
				<li class="outer-menu-item">HTML5</li>
				<li class="outer-menu-item">CSS3</li>
				<li class="outer-menu-item">JavaScript</li>
			</ul>
			</div>
			<div class="pull-right">
				<form>
					<input type="text" class="input-search" name="text">
					<input type="submit" class="input-search-submit" name="submit" value="검색">
				</form>
			</div>
		</nav>
		<div id="content">
			<section id="main-section">
				<article>
				<div class="article-header">
					<h1 class="article-title">HTML5 개요와 활용</h1>
					<p class="article-date">2013년 02월 14일</p>
				</div>
				<div class="article-body">
					<img src="https://via.placeholder.com/430x280">
					<p>
						Life is too short to spend time with people who suck the happiness out of you. If someone wants you in their life, they’ll make room for you. You shouldn’t have to fight for a spot. Never, ever insist yourself to someone who continuously overlooks your worth. And remember, it’s not the people that stand by your side when you’re at your best, but the ones who stand beside you when you’re at your worst that are your true friends. In the flood of darkness, hope is the light. It brings comfort, faith, and confidence. It gives us guidance when we are lost, and gives support when we are afraid. And the moment we give up hope, we give up our lives. The world we live in is disintegrating into a place of malice and hatred, where we need hope and find it harder. In this world of fear, hope to find better, but easier said than done, the more meaningful life of faith will make life meaningful. Only when you understand the true meaning of life can you live truly. Bittersweet as life is, it's still wonderful, and it's fascinating even in tragedy. If you're just alive, try harder and try to live wonderfully. I believe there is a person who brings sunshine into your life. That person may have enough to spread around. But if you really have to wait for someone to bring you the sun and give you a good feeling, then you may have to wait a long time.
					</p>
				</div>
				</article>
				<br>
				<article>
					<div class="article-header">
						<h1 class="article-title">HTML5 응용과 실습</h1>
						<p class="article-date">2013년 02월 17일</p>
					</div>
					<div class="article-body">
						<img src="https://via.placeholder.com/430x280">
						<p>
							With the developing of China and the reform and opening-up policy being carried out, the recent years have seen a dramatic increase in the number of Chinese people traveling abroad. Thousands upon thousands of visitors are crowding into other country , as a result, tourism is developing rapidly all over the world. Thus, there is a hot discussion about that whether the booming tourist trade helps tourists develop greater understanding of other nations/places or not. For my part, I agree with the former opinion for the following reasons. On one hand, from the level of direct terms, tourism provides people with a good opportunity to have a better understanding of the culture, history and customs in foreign countries. Culture is different from country to country. The differences of culture between different countries are easier to be accepted by people when they travel to other country even than through the Internet, attributable to culture should be experienced by us. On the other hand, from the level of indirect terms, tourism contributes a great deal to the friendship and mutual understanding between people from different countries, which will unquestionably enhance the future cooperation in every field, which will enables tourists develop greater understanding of other nations/places. The deep impact of the booming tourist trade is readily discernible in a number of areas.
						</p>
					</div>
				</article>
				<br>
			</section>

			<aside id="main-aside">
				<div class="aside-list">
					<h3>카테고리</h3>
					<ul>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
					</ul>
					<h3>최근 글</h3>
					<ul>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
					</ul>
				</div>
				<br>
			</aside>
		</div>
		<footer id="main-footer">
			<a href="#">Created by 유흠</a>
		</footer>
		</div>
</body>
</html>
